<template>
    <div class="app_container">
        <el-row :gutter="40">
            <el-col :span="18">
                <el-descriptions direction="vertical" :column="5" border>
                    <el-descriptions-item label="用户id">{{ info.uid }}</el-descriptions-item>
                    <el-descriptions-item label="头像">
                        <img :src="info.avatar" width="80" height="80" style="display: block;">
                    </el-descriptions-item>
                    <el-descriptions-item label="用户名">{{ info.username }}</el-descriptions-item>
                    <el-descriptions-item label="发布时间">{{ info.createTime }}</el-descriptions-item>
                    <el-descriptions-item label="帖子状态">{{ delText }}</el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="1" border>
                    <el-descriptions-item label="标题">{{ info.title }}</el-descriptions-item>
                    <el-descriptions-item label="内容">
                        <pre>{{ info.content }}</pre>
                    </el-descriptions-item>
                    <el-descriptions-item label="帖子类型">{{ info.mediaType }}</el-descriptions-item>
                    <el-descriptions-item label="图片" v-if="info.mediaType == 'image'">
                        <div class="fl-wrap">
                            <el-image v-for="(item, index) in info.mediaUrls" :key="index" :src="item.url" fit="contain" :preview-src-list="info.imgList" :initial-index="index"></el-image>
                        </div>
                    </el-descriptions-item>
                    <el-descriptions-item label="封面图" v-if="info.mediaType == 'video'">
                        <el-image :src="info.coverUrl" fit="contain" :preview-src-list="[info.coverUrl]"></el-image>
                    </el-descriptions-item>
                    <el-descriptions-item label="视频" v-if="info.mediaType == 'video'">
                        <video :src="info.mediaUrls[0].url" controls width="300px"></video>
                    </el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="仅自己可见">{{ info.enable == 0 ? '是' : '否' }}</el-descriptions-item>
                    <el-descriptions-item label="点赞">{{ info.likeCount }}</el-descriptions-item>
                    <el-descriptions-item label="评论">{{ info.commentCount }}</el-descriptions-item>
                    <el-descriptions-item label="转发">{{ info.shareCount }}</el-descriptions-item>
                </el-descriptions>
                <br>

                <el-descriptions direction="vertical" :column="4" border>
                    <el-descriptions-item label="ip">{{ info.ip }}</el-descriptions-item>
                    <el-descriptions-item label="longitude">{{ info.longitude }}</el-descriptions-item>
                    <el-descriptions-item label="latitude">{{ info.latitude }}</el-descriptions-item>
                    <el-descriptions-item label="address">{{ info.address }}</el-descriptions-item>
                </el-descriptions>
                <br>
            </el-col>
            <el-col :span="6">
                <el-descriptions title="操作" direction="vertical" :column="3" border></el-descriptions>
                <div>
                    <el-button v-role="['/upsPost/auditPost']" type="success" @click="onSet(0)" v-if="info.del != 0">通过</el-button>
                    <el-button v-role="['/upsPost/auditPost']" type="danger" @click="onSet(4)" v-if="info.del != 4">驳回</el-button>
                    <el-button v-role="['/upsPost/auditPost']" type="danger" @click="onSet(5)" v-if="info.del != 5">下架</el-button>
                    <el-button v-role="['/upsPost/auditPost']" type="success" @click="onSet(0)" v-if="info.del == 5">上架</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { apiPostDetail, apiPostAudit } from "@/api/contactManage.js";
export default {
    data() {
        return {
            item_id: '',
            info: {},
            delText: '',
        }
    },
    created() {
        const { id } = this.$route.query
        this.item_id = id
        this.getData(id)
    },
    methods: {
        getData(id) {
            apiPostDetail({ id }).then(({ data }) => {
                if (data.mediaType == 'image') {
                    const arr = []
                    for (let index = 0; index < data.mediaUrls.length; index++) {
                        arr.push(data.mediaUrls[index].url)
                    }
                    data.imgList = arr
                }
                this.info = data
                this.setStatus(data.del)
            });
        },
        setStatus(del) {
            switch (del) {
                case 0:
                    this.delText = '正常'
                    break;
                case 1:
                    this.delText = '已删除'
                    break;
                case 2:
                    this.delText = '审核中（机审）'
                    break;
                case 3:
                    this.delText = '审核中（人工复审）'
                    break;
                case 4:
                    this.delText = '审核驳回'
                    break;
                case 5:
                    this.delText = '平台下架'
                    break;
            }
        },
        // 设置
        onSet(status) {
            let msg = ''
            switch (status) {
                case 0:
                    msg = '通过'
                    break;
                case 4:
                    msg = '驳回'
                    break;
                case 5:
                    msg = '下架'
                    break;
            }
            this.$msgbox({
                title: "温馨提示",
                message: `确认${msg}？`,
                showCancelButton: true,
                cancelButtonText: "取消",
                confirmButtonText: "确认",
            }).then(() => {
                apiPostAudit({ id: this.item_id, del: status }).then((res) => {
                    this.$message({ type: "success", message: res.message });
                    this.info.del = status
                    this.setStatus(status)
                }).catch((err) => {
                    this.$message({ type: "error", message: err });
                    console.log(err);
                });
            }).catch(() => {
                // 点击取消
            });
        },
    },
}
</script>

<style>
.el-image {
    width: 150px;
    height: 150px;
    margin: 4px 10px 4px 0;
}
</style>